<template>
  <div>
    <div class="notLogin" v-if="!isLogin">
      <div class="head">
        <div class="icon"></div>
        <p>你还没有登录哦</p>
        <div class="login" @touchend="loginTouch"></div>
      </div>
    </div>
    <div class="login" v-if="isLogin">
      <div class="head">
        <div class="icon"></div>
      </div>
      <div class="name">{{userInformation.detail.nickname}}</div>
      <div class="vipPointBg" v-if="userVipList[2].evaluateActive || mastery.changed "></div>
      <div class="personalBox">
        <div class="card" v-for="(item,index) in cardList " :key="index" @touchend="cardTouch(item.title)"
          :style="cardStyle(item.url)">
          <div>
            <img :src="cardIconUrl(item.url)" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
export default {
  data() {
    return {
      cardList: [
        { title: "study", url: "学习" },
        { title: "produce", url: "我的作品" },
        { title: "read", url: "历史阅读" },
        { title: "information", url: "个人信息" },
      ],
      isHidden: false,
    }
  },
  computed: {
    isLogin() {
      return this.userInformation.phoneNumber || this.userInformation.isWechat
    },
    cardStyle(url) {
      return function (url) {
        return {
          zIndex: this.userVipList[2].evaluateActive || this.mastery.changed ? url === '学习' ? 101 :'' : '',
          filter:this.userVipList[2].evaluateActive || this.mastery.changed ? url === '学习' ?
                  'drop-shadow(rgb(254, 172, 81) 1px -1px 0.3rem) drop-shadow(rgb(254, 172, 81) -1px 1px 0.3rem)' : '' : '',
          background: "url(" + this.variable.STATICE_URLTITLE + "personals/" + url + ".png)0 0/100% 100%",
          display: this.isHidden ? 'none' : '',
        }
      }
    },
    cardIconUrl(url) {
      return function (url) {
        return this.variable.STATICE_URLTITLE + "personals/icon-" + url + ".png"
      }
    },
    ...mapGetters("personalStatus", {
      userInformation: "getUserInformation",
      userVipList: "getUserVipList",
      mastery: "getUserMastery",
    }),
    ...mapGetters("seedActivityStatus", {
      seedActivity: "getSeedActivity",
      seedPicbook: "getSeedPicbook"
    }),
  },
  methods: {
    //跳转到登录
    loginTouch: function () {
      this.touchMusic()
      this.isHidden = true
      this.setLoading({
        callback: () => {
          //返回至列表进入状态
          this.$router.push({ path: "/user" })
        }
      })
    },
    //跳转到子模块
    cardTouch: function (item) {
      this.touchMusic()
      this.isHidden = true
      this.setLoading({
        callback: () => {
          //返回至列表进入状态
          this.$router.push({ path: "/personal/" + item })
        }
      })
    },
    ...mapActions("mainStatus", ["setLoading", "setPopup"])
  }
}
</script>

<style lang="stylus" scoped>
.login
  .head
    transform translate3d(var(--X), calc(0px - var(--Y)), 0)
    $coord('WHRT', 4rem, 4rem, 2rem, 0.5rem)
    background url($urlTitle + 'personals/头像框背景.png') 0 0 / 100% 100%
    .icon
      $coord('WHLT', 3rem, 3rem, 0.5rem, 1rem)
      background url($urlTitle + 'personals/头像.png') 0 0 / 100% 100%
  .name
    transform translate3d(var(--X), calc(0px - var(--Y)), 0)
    font-size 1rem
    $coord('WHRT', 8rem, 1rem, 0rem, 4.6rem)
    color rgb(184, 135, 110)
  .vipPointBg
    z-index 99
    position fixed
    $coord('WHLT',100%,100%,0,0)
    background rgba(0, 0, 0, 0.5)
    color rgb(250, 250, 250)
  .personalBox
    width 76%
    height calc(var(--contentHeight) * 0.4)
    max-width 950px
    max-height 280px
    margin calc(var(--contentHeight) * 0.38) auto 0 auto
    .card
      float left
      width 24%
      height 100%
      margin 0 0.49%
      position relative
      div
        $coord('WHLT', 80%, 40%, 10%, 10%)
        $alignCenter()
        img
          max-height 80%
          width auto
.notLogin
  transform translate3d(0, calc(0px - var(--Y)), 0)
  .head
    position absolute
    $center('WHL_T', 8rem, 8rem, 18vh)
    background url($urlTitle + 'personals/未登录-头像框背景.png') 0 0 / 100% 100%
    .icon
      $coord('WHLT', 6rem, 6rem, 1rem, 2rem)
      background url($urlTitle + 'personals/未登录-头像.png') 0 0 / 100% 100%
    p
      color rgb(184, 135, 110)
      font-size 2rem
      $coord('WHLB', 14rem, 2rem, -3rem, -4rem)
    .login
      background url($urlTitle + 'personals/立即登录.png') 0 0 / 100% 100%
      $coord('WHLB', 8rem, 3rem, 0rem, -9rem)
</style>
